In this chapter you'll learn how to align text and images. (You don't know how to add images in yet. Images are coming up in a later lesson)
 
The divider examples don't use an ending to close a command because they are used once, not in a continuation. The <dd> allows you to indent a paragraph, making the text look like the indentation of this paragraph you're now reading. The <p> you should already know. It gives you a new paragraph, and writes whatever else below the last paragraph. Can be used it stacking images and text. The <hr> is a very common one. You probably have wondered how they make a horizontal line going accross a page. (Like the colored one above. But this one is just grey. You must have seen them while searching the web)
The <br> is similar to the <p> (new paragraph) but it doesn't move the next paragraph down as far.
<dd> indent paragraph
<P> new paragraph
<HR> add horizontal line
<BR> Line Break
Below you can see the <dd> indentation, the difference between the <br> (top one) and <p> (bottom one) both after the comma. And the <hr> is at work as well, adding those grey separator lines.
 
You should be able to figure out the code for the image above. If not here it is:
<hr>
<dd>Welcome to Extreme Mac! I hope your learning your, <br> html the easy way!
<hr>
<dd>Welcome to Extreme Mac! I hope your learning your, <p> html the easy way!
<hr>
I think you're ready for a some more complicated html. Below, I'll show you how to make your <hr> (divider line) specified sizes. It's easy once you get the hang of it.
1) To make a divider line thicker use this:
<HR SIZE=pixel size>
2) To make a divider line have more width across screen use this:
<HR WIDTH=pixel size>
3) To make a divider line a certain percentage of the width accross screen use this:
<HR WIDTH=screen%>
4) To make your divider a solid line, use this:
<HR NOSHADE>
•Using the example 3 is nice because everybody has a different size monitor, so your divider will always look good on a 17 inch vs. a 12 inch.
•Below are some examples of those dividers in use.
 
•Below is the code I used to make the image above:
<HR SIZE=10>
<HR WIDTH=200>
<HR WIDTH=30%>
<HR NOSHADE>
•For your web page, lets add in 2 horizontal line confugurations in 1. Make it 30% (Example 3) and a thickness of 10 pixels. You will be replacing the <p> because the divider lines already configure it in with it.
Below is the code:
<hr width=30% size=10>
•Put it under your heading. Your page should now look like this:
 
Extreme Mac
 
// // //////
///// //
// // //////
 
•You page's code should now look similar to this:
